<template>
  <div style="height: 82vh">
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/" style="height: 1.2rem">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 滚动条 -->
    <el-scrollbar style="height: 100%">
      <el-table
        :data="commodityOrderList"
        style="width: 100%; margin-bottom: 2rem; margin-top: 1rem"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- 商品信息 -->
        <el-table-column
          prop="orderNumber"
          label="商品信息"
          sortable
          width="300"
        >
          <!-- 订单详情 -->
          <template slot-scope="scope">
            <!-- 订单编号 -->
            <span v-if="scope.row.children">
              订单编号：{{ scope.row.orderNumber }}
            </span>
            <div v-else>
              <!-- 商品图片 -->
              <el-col :span="12">
                <el-image
                  :src="img(scope.row.commodityImagesId)"
                  style="width: 100px; height: 100px"
                >
                  <!-- 图片加载中 -->
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </el-col>
              <!-- 店铺名和商品名 -->
              <el-col :span="12">
                <h5>店铺：{{ scope.row.storeName }}</h5>
                <h4>商品名：{{ scope.row.commodityName }}</h4>
              </el-col>
            </div>
          </template>
        </el-table-column>
        <!-- 商品单价 -->
        <el-table-column
          prop="commodityPrices"
          label="单价"
          sortable
          width="150"
        >
        </el-table-column>
        <!-- 商品数量 -->
        <el-table-column prop="number" label="数量" sortable width="100">
        </el-table-column>
        <!-- 付款总价 -->
        <el-table-column
          prop="paymentAmount"
          label="总金额"
          sortable
          width="100"
        >
        </el-table-column>
        <!-- 交易状态 -->
        <el-table-column
          prop="settlementStatus"
          label="交易状态"
          sortable
          width="120"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.children"
              :type="scope.row.settlementStatus ? 'success' : 'danger'"
              disable-transitions
            >
              {{ scope.row.settlementStatus ? '已支付' : '待付款' }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 下单时间 -->
        <el-table-column
          prop="createdTime"
          label="下单时间"
          sortable
          width="110"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.children">
              {{ scope.row.createdTime }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="交易操作" sortable width="200">
          <template slot-scope="scope" v-if="scope.row.children">
            <el-button
              size="mini"
              type="danger"
              v-if="scope.row.settlementStatus ? '' : '去付款'"
              @click="goPay(scope.row.id)"
              >去付款</el-button
            >
            <el-button size="mini" @click="cancelOrder(scope.row.id)"
              >删除订单</el-button
            >
          </template>
        </el-table-column>
        <!-- 收货地址 -->
        <el-table-column prop="deliveryAddress" label="收货地址">
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 所有的订单数据
      commodityOrderList: [],
      uId: 0
    }
  },
  // 钩子
  created () {
    this.uId = window.localStorage.getItem("userId")
    this.getCommodityOrderList(this.uId)
  },
  methods: {
    // 获取图片地址
    img (id) {
      // 截取第一位
      const imgId = id.split(',')[0]
      const url = "https://api.h1234.top/files/" + imgId
      return url
    },
    // 获取用户订单列表
    async getCommodityOrderList (uid) {
      const { data: res } = await this.$http.get("CommodityOrders/uid/" + uid)
      if (res.meta.status !== 200) {
        // 获取商品列表失败
        this.$message.error("商品列表获取失败！")
      } else {
        // 获取商品订单列表成功
        const commodityOrders = res.data.commodityOrders
        for (let index = 0; index < commodityOrders.length; index++) {
          const commodityIds = commodityOrders[index].commodityInfo.split(",").map(Number)
          console.log(commodityIds);
          const arr = []
          for (let i = 0; i < commodityIds.length; i++) {
            const { data: newres } = await this.$http.get("Commodities/id/" + commodityIds[i])
            if (res.meta.status !== 200) {
              // 获取商品列表失败
              this.$message.error("商品列表获取失败！")
            } else {
              arr.push(newres.data.commodities)
              commodityOrders[index].children = arr
            }
          }
        }
        this.commodityOrderList = commodityOrders
      }
    },
    // 删除订单
    cancelOrder (id) {
      this.$confirm('确认删除订单吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 确认
        const { data: res } = await this.$http.delete("CommodityOrders/" + id)
        if (res.meta.status !== 200) {
          // 删除订单失败
          this.$message.error('订单删除失败！')
        } else {
          // 删除订单成功
          // 重新获取订单列表
          this.getCommodityOrderList(this.uId)
          this.$message.success('订单删除成功！')
        }
      }).catch(() => {
        // 取消
        this.$message.info('已取消删除！')
      })
    },
    // 去付款
    goPay (id) {
      //跳转支付页面
      this.$router.push('/pay?id=' + id)
    }
  }
}
</script>

<style>
body .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>